<template>
    <div class="person">
        <h2>当前水温：{{ temperature }}℃</h2>
        <h2>当前水位：{{ height }}m</h2>
        <button @click="changeTemperature">水温+10</button>
        <button @click="changeHeight">水位+10</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import { ref, watch, watchEffect } from 'vue';

    let temperature = ref(10);
    let height = ref(0);

    function changeTemperature() {
        temperature.value += 10;
    }

    function changeHeight() {
        height.value += 10;
    }

    /* 你说监视谁就监视谁 */ 
    // watch([temperature, height], (newVal) => {
    //     let [newTemp, newHeight] = newVal;
    //     if (newTemp >= 60 || newHeight >= 80) {
    //         console.log('给服务器发请求');
    //     }
    // });

    /* watchEffect能自动分析要去监视哪个响应式属性 */
    watchEffect(() => {
        if (temperature.value >= 60 || height.value >= 80) {
            console.log('给服务器发请求');
        }
    })
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px
    }
    button {
        margin: 0 5px;
    }
</style>